<script setup>
import {onMounted, reactive, ref} from "vue";
import axios from 'axios'

onMounted(() => {
  axios.get('https://mock.apifox.com/m1/2893111-0-default/emps').then((res) => {
    console.log(res.data.data)
    tableData.value=res.data.data
  })
})



const formInline = reactive({
  user: '',
  region: '',
  date: '',
})

const onSubmit = () => {
  console.log('submit!')
}


const tableData = ref([])

</script>


<template>
    <!-- ------------------------------------------------------------  -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="姓名">
        <el-input v-model="formInline.user" placeholder="请输入员工姓名" clearable />
      </el-form-item>
      <el-form-item label="性别">
        <el-select
            style="width: 100px"
            v-model="formInline.region"
            placeholder="请选择"
            clearable
        >
          <el-option label="男" value="1" />
          <el-option label="女" value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="入职时间">
        <el-date-picker
            v-model="formInline.date"
            type="daterange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>

    <el-button type="success">+新增员工</el-button>
    <el-button type="success">-批量删除</el-button>

    <el-table
        ref="multipleTableRef"
        :data="tableData"
        style="width: 100%"
        @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column property="name" label="姓名" width="120" />
      <el-table-column property="age" label="年龄" width="120" />
      <el-table-column property="image" label="图片" width="120" >
        <template #default="scope">
          <img :src="scope.row.image" style="width: 60px">
        </template>
      </el-table-column>>
      <el-table-column property="gender" label="性别" width="120" />
      <el-table-column property="job" label="职业" width="120" />
      <el-table-column  label="操作" width="120" >
        <template #default="scope">
          <el-button type="text">编辑</el-button>
          <el-button type="text">删除</el-button>
        </template>
      </el-table-column>>

    </el-table>
    <!--          分页     -->
    <br>
    <el-pagination background layout="prev, pager, next" :total="1000" />
    <!-- -------------------------------------------------------------  -->

</template>


<style>

</style>